<template>
    <div id="subPage">
        <div class="box">
            <div class="top" style="padding: 0;display: flex;justify-content: flex-start;align-items: center;">
                <div class="list" style="width: 100px; cursor: pointer; border-bottom: 0" @click="$router.push({ path: '/quality/rectify' })">
                    <Icon type="ios-arrow-back" style="font-size: 16px" />返回
                </div>
                <div class="list" style="justify-content: space-between; align-items: center">
                    <div class="item" style="margin-bottom: 0">
                        <span v-if="isAdd" class="tip" style="color: red">*</span>
                        <span class="name">受检单位:</span>
                        <Select v-if="isAdd" v-model="corpId" style="width: 250px; height: 36px" placeholder="请选择" filterable @on-change="getCorpSelect">
                            <Option v-for="(item, index) in corpList" :value="item.corpId" :key="index" >{{ item.corpName }}</Option>
                        </Select>
                        <span v-else style="width: 5rem">{{ corpName }}</span>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="operationBox">
                        <div class="tableBtn" @click="addRectify" v-if="btnList.includes('quality/rectify/add') && operationActive == 1">
                            <div class="btnBox">
                                <span class="el-icon-circle-plus-outline" style="font-size: 0.2rem;margin-right: 0.1rem;cursor: pointer;"></span>
                                <div class="text">检查记录</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="tableBox">
                    <div class="tableList">
                        <el-table :data="list" style="width: 100%" :stripe="true">
                            <template slot="empty">
                                <div class="no_lsit" style="width: 96%; margin: auto">
                                    <img src="./../../assets/images/common/rotary_nodata.png" style="width: 3.9rem; height: 2.4rem" />
                                </div>
                            </template>
                            <el-table-column label="紧急程度" prop="urgency">
                                <template slot-scope="scope">
                                    <span style="padding: 8px;background: rgba(0, 172, 251, 0.15);color: #00acfb;" v-if="scope.row.urgency == 1">一般</span>
                                    <span style="padding: 8px;background: rgba(255, 162, 1, 0.15);color: #ffa201;" v-if="scope.row.urgency == 2">紧急</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="问题明细" prop="issueContent"></el-table-column>
                            <el-table-column label="检查人" prop="checkUserName"></el-table-column>
                            <el-table-column label="检查时间" prop="rectifyStartTime"></el-table-column>
                            <el-table-column label="整改人" prop="rectifyUserName"></el-table-column>
                            <el-table-column label="整改期限" prop="rectifyTime"></el-table-column>
                            <el-table-column prop="state" label="问题状态" width="100">
                                <template slot-scope="scope">
                                    <div class="p">
                                        <span class="overdueTip" v-if="scope.row.overdue == 1">超</span>
                                        <span v-if="scope.row.state == 10">待整改</span>
                                        <span v-if="scope.row.state == 11">不合格</span>
                                        <span v-if="scope.row.state == 12">不合格</span>
                                        <span v-if="scope.row.state == 20">待复查</span>
                                        <span v-if="scope.row.state == 30">待核验</span>
                                        <span v-if="scope.row.state == 100">已完成</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" v-if="operationActive == 1" align="center">
                                <template slot-scope="scope">
                                    <el-button style="color: #ff001e" @click.native.prevent="removeRow(scope.row.checkId)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="clearfix pageFix" style="bottom: 0.8rem" v-show="list.length > 0 && operationActive == 2">
                        <div class="float-right">
                            <Page
                                v-if="totalCount"
                                :current.sync="current"
                                :total="totalCount"
                                :page-size="pageSize"
                                show-elevator
                                show-total
                                @on-change="pageChange"
                            ></Page>
                        </div>
                    </div>
                    <div class="clearfix pageFix">
                        <div class="operationBox" v-if="operationActive == 1">
                            <div class="tableBtn cancel" style="margin-right: 20px" @click="cancel(2)">
                                <div class="btnBox">
                                    <div class="text">取消</div>
                                </div>
                            </div>
                            <div class="tableBtn" @click="submitBtn">
                                <div class="btnBox">
                                    <div class="text">保存</div>
                                </div>
                            </div>
                        </div>
                        <div class="operationBox" v-if="operationActive == 2">
                            <div class="tableBtn cancel" style="margin-right: 20px" @click="getDetailAll">
                                <div class="btnBox">
                                    <div class="text">编辑</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="addModal" title="添加检查记录" width="1200px;" :mask-closable="false" class-name="msgModal">
            <div class="modal">
                <div class="search">
                    <div class="item daterange">
                        <span>选择日期:</span>
                        <DatePicker
                            :editable="false"
                            type="daterange"
                            transfer
                            :options="options"
                            :clearable="false"
                            v-model="dateArr"
                            format="yyyy-MM-dd"
                            placement="top-start"
                            show-week-numbers
                            placeholder="请选择日期"
                            style="width: 200px; left: 0; top: 0"
                            @on-change="getDateArr"
                        ></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="item">
                        <span>超时状态 :</span>
                        <Select v-model="timeoutMode" style="width: 150px" clearable placeholder="请选择" @on-change="getTimeoutMode">
                            <Option v-for="(item, index) in timeoutModeList" :value="item.id" :key="index">
                                {{ item.name }}
                            </Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none"  />
                    </div>
                    <div class="item">
                        <span>紧急程度:</span>
                        <Select v-model="urgency" style="width: 150px" clearable placeholder="请选择" @on-change="getUrgency">
                            <Option v-for="(item, index) in urgencyList" :value="item.id" :key="index" >{{ item.name }}</Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="item">
                        <span>问题状态:</span>
                        <Select v-model="issueStatus" style="width: 150px" clearable placeholder="请选择" @on-change="getIssueStatus" transfer>
                            <Option v-for="(item, index) in issueStatusList" :value="item.id" :key="index">
                                {{ item.name }}
                            </Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="item">
                        <span>检查部位:</span>
                        <treeselect
                            :options="checkPartList"
                            placeholder="请选择"
                            :clear-on-select="true"
                            @input="getCheckInput"
                            @select="getCheckSelect"
                            style="width: 150px"
                            v-model="checkPart"
                            z-index="999"
                            :clearable="true"
                        />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="tableBox">
                    <div class="tableList">
                        <el-table ref="table" :data="checkList" style="width: 100%" height="500px" :stripe="true" :row-key="getRowKeys" @selection-change="handleSelectionChange">
                            <template slot="empty">
                                <div class="no_lsit" style="width: 96%; margin: auto">
                                    <img src="./../../assets/images/common/rotary_nodata.png" style="width: 3.9rem; height: 2.4rem" />
                                </div>
                            </template>
                            <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                            <el-table-column label="紧急程度" prop="urgency">
                                <template slot-scope="scope">
                                    <span style="padding: 8px;background: rgba(0, 172, 251, 0.15);color: #00acfb;" v-if="scope.row.urgency == 1">一般</span>
                                    <span style="padding: 8px;background: rgba(255, 162, 1, 0.15);color: #ffa201;" v-if="scope.row.urgency == 2">紧急</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="问题明细" prop="issueContent"></el-table-column>
                            <el-table-column label="检查人" prop="checkUserName"></el-table-column>
                            <el-table-column label="检查时间" prop="rectifyStartTime"></el-table-column>
                            <el-table-column label="整改人" prop="rectifyUserName"></el-table-column>
                            <el-table-column label="整改期限" prop="rectifyTime"></el-table-column>
                            <el-table-column prop="state" label="问题状态" width="100">
                                <template slot-scope="scope">
                                    <div class="p">
                                        <span class="overdueTip" v-if="scope.row.overdue == 1">超</span>
                                        <span v-if="scope.row.state == 10">待整改</span>
                                        <span v-if="scope.row.state == 11">不合格</span>
                                        <span v-if="scope.row.state == 12">不合格</span>
                                        <span v-if="scope.row.state == 20">待复查</span>
                                        <span v-if="scope.row.state == 30">待核验</span>
                                        <span v-if="scope.row.state == 100">已完成</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="clearfix pageFix" style="display: flex;justify-content: center;align-items: center;width: 90%;" v-show="checkList.length > 0">
                        <div class="float-right">
                            <Page
                                v-if="totalCount_check"
                                :current.sync="current_check"
                                :total="totalCount_check"
                                :page-size="pageSize_check"
                                show-elevator
                                show-total
                                @on-change="pageChange_check"
                            ></Page>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <div class="footer">
                    <div class="button cancel" @click="cancel(1)">取消</div>
                    <div class="button submit" @click="save" v-preventReClick="1500">确定</div>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getQualityPartList,
    getQualityRecordList,
    getQualityRectifyDetails,
    setQualityRectifyAdd,
    setQualityRectifyEdit,
} from "@/api/quality";
import { initYMD } from "@/sever/utils";
import { getCorpList_V1 } from "@/api/mach";
import { transId } from "@/sever/config";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    components: { Treeselect },
    data() {
        return {
            getRowKeys(row) {
                return row.checkId;
            },
            exportModal: false,
            length: 32,
            options: {
                //时间配置参数
                disabledDate(date) {
                    return date && date.valueOf() > Date.now();
                },
            },
            current: 1, //当前页面下标
            pageNum: "1", //分页下表
            pageSize: 10, //分页数量
            totalCount: 0, //已处理列表总数
            list: [], //数据列表
            btnList: [], //权限
            isAdd: true, //数据处理节流阀
            corpList: [], //受检单位单位列表
            deptId: "", //组织机构ID
            corpId: "", //受检单位Id
            corpName: "", //受检单位名称
            addModal: false, //添加弹窗
            dateArr: [
                new Date(new Date().getTime() - 7776000000),
                new Date(new Date().getTime()),
            ], //日期
            issueStatusList: [
                {
                    id: 10,
                    name: "待整改",
                },
                {
                    id: 20,
                    name: "待复查",
                },
                {
                    id: 30,
                    name: "待核验",
                },
                {
                    id: 999,
                    name: "不合格",
                },
                {
                    id: 100,
                    name: "合格",
                },
            ], //问题状态列表
            issueStatus: "", //问题状态id
            urgencyList: [
                {
                    id: 1,
                    name: "一般",
                },
                {
                    id: 2,
                    name: "紧急",
                },
            ], //紧急状态列表
            urgency: "", //紧急状态
            timeoutModeList: [
                {
                    id: 0,
                    name: "正常整改",
                },
                {
                    id: 1,
                    name: "超时整改",
                },
            ], //超时状态列表
            timeoutMode: "", //超时状态
            checkPartList: [], //检查部位列表
            checkPart: null, //检查部位
            checkPartId: "", //检查部位ID
            checkList: [], //检查记录列表
            current_check: 1, //当前页面下标
            pageNum_check: "1", //分页下表
            pageSize_check: 9, //分页数量
            totalCount_check: 0, //列表总数
            checkListIds: [], //选中列表项
            rectifyId: "", //整改通知单id
            operationActive: 1,
        };
    },
    methods: {
        //获取全部数据列表
        getDetailAll() {
            this.operationActive = 1;
            this.pageNum = 1;
            this.getDetails(this.totalCount);
        },
        //详情
        getDetails(pageSize) {
            let params = {
                rectifyId: this.rectifyId,
                pageNum: this.pageNum,
                pageSize,
            };
            getQualityRectifyDetails(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                        this.checkListIds = this.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => console.log(error));
        },
        //检查部位数据清空
        getCheckInput(index) {
            if (index == undefined) {
                this.checkPart = null;
                this.checkPartId = "";
                this.getCheckListFn();
            }
        },
        //检查部位数据选中
        getCheckSelect(index) {
            this.checkPart = index.name;
            this.checkPartId = index.id;
            this.getCheckListFn();
        },
        //检查日期
        getDateArr(i, v) {
            this.dateArr = i;
            this.getCheckListFn();
        },
        //超时
        getTimeoutMode(index) {
            this.timeoutMode = index;
            this.getCheckListFn();
        },
        //紧急
        getUrgency(index) {
            this.urgency = index;
            this.getCheckListFn();
        },
        //问题
        getIssueStatus(index) {
            this.issueStatus = index;
            this.getCheckListFn();
        },
        //添加检查记录
        addRectify() {
            this.addModal = true;
            this.getCheckPartList();
            this.getCheckListFn();
        },
        //数据提交至服务器
        submitBtn() {
            if (this.list.length == 0) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请添加检查记录",
                });
                return;
            }
            let checkIds = [];
            this.list.forEach((v) => {
                checkIds.push(v.checkId);
            });
            if (this.isAdd) {
                if (this.corpId == "") {
                    this.$Modal.warning({
                        title: "提示",
                        content: "请选择受检单位",
                    });
                    return;
                }
                let params = {
                    deptId: this.deptId,
                    corpId: this.corpId,
                    corpName: this.corpName,
                    checkIds,
                };
                setQualityRectifyAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$Message.success("提交成功");
                            this.$router.push({ path: "/quality/rectify" });
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => console.log(error));
            } else {
                let params = {
                    deptId: this.deptId,
                    corpId: this.corpId,
                    rectifyId: this.rectifyId,
                    corpName: this.corpName,
                    checkIds,
                };
                setQualityRectifyEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$Message.success("提交成功");
                            this.$router.push({ path: "/quality/rectify" });
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => console.log(error));
            }
        },
        //数据提交
        save() {
            this.addModal = false;
            this.list = this.checkListIds;
        },
        handleSelectionChange(arr) {
            this.checkListIds = arr;
        },
        //获取带分页的检查记录列表
        async getCheckListFn() {
            let issueStatus = this.issueStatus;
            if (issueStatus == 999) {
                issueStatus = "11,12";
            }
            let paramsObj = {
                deptId: this.deptId,
                state: issueStatus,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1]),
                partId: this.checkPartId,
                urgency: this.urgency,
                overdue: this.timeoutMode,
                pageNum: this.pageNum_check,
                pageSize: this.pageSize_check,
            };
            let params = {};
            for (let key in paramsObj) {
                if (paramsObj[key] !== "") {
                    params[key] = paramsObj[key];
                }
            }
            await getQualityRecordList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.totalCount_check = res.data.total;
                        this.checkList = res.data.checkList;
                        let list = [];
                        if (this.addModal) {
                            this.checkListIds.forEach((v) => {
                                list.push(v.checkId);
                            });
                        } else {
                            this.list.forEach((v) => {
                                list.push(v.checkId);
                            });
                        }
                        // 使用$nextTick方法在DOM渲染完成后执行里面的函数
                        this.$nextTick(() => {
                            this.checkList.forEach((item) => {
                                if (list.includes(item.checkId)) {
                                    this.$refs.table.toggleRowSelection(
                                        item,
                                        true
                                    );
                                } else {
                                    this.$refs.table.toggleRowSelection(
                                        item,
                                        false
                                    );
                                }
                            });
                        });
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //获取检查部位
        getCheckPartList() {
            let params = {
                deptId: this.deptId,
            };
            getQualityPartList(params)
                .then((res) => {
                    if (res.code == 200) {
                        let data = res.data.list;
                        this.checkPartList = transId(data);
                        if (this.checkPartList.length == 0) {
                            this.checkPartList.push({
                                id: "all",
                                title: "暂无数据",
                                label: "暂无数据",
                                isDisabled: true,
                            });
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //获取单位列表
        getCorpListFn() {
            let params = {
                deptId: this.deptId,
            };
            getCorpList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.corpList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //获取合作单位
        getCorpSelect(index) {
            this.corpList.forEach((v, i) => {
                if (index == v.corpId) {
                    this.corpId = v.corpId;
                    this.corpName = v.corpName;
                }
            });
        },
        //删除数据弹框显示
        removeRow(id) {
            this.delModal = true;
            let list = [];
            this.list.forEach((v) => {
                if (id != v.checkId) {
                    list.push(v);
                }
            });
            this.list = list;
            this.checkListIds = list;
        },
        //分页
        pageChange(index) {
            this.pageNum = index;
            this.getDetails(this.pageSize);
        },
        pageChange_check(index) {
            this.pageNum_check = index;
            this.getCheckListFn();
        },
        //取消关闭集合
        cancel(active) {
            if (active == 1) {
                this.addModal = false;
            } else if (active == 2) {
                if (this.isAdd) {
                    this.$router.push({ path: "/quality/rectify" });
                } else {
                    this.operationActive = 2;
                    this.getDetails(this.pageSize);
                }
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        let rectifyData = JSON.parse(localStorage.getItem("rectifyData"));
        if (rectifyData && rectifyData.rectifyId) {
            this.rectifyId = rectifyData.rectifyId;
            this.corpId = rectifyData.corpId;
            this.corpName = rectifyData.corpName;
            this.isAdd = false;
            this.operationActive = 2;
            this.getDetails(this.pageSize);
            return;
        }
        this.getCorpListFn();
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.$router.push({ path: "/quality/rectify.vue" });
            }
        },
    },
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "../../assets/style/qualityAndSafety/modal.scss";
@import "../../assets/style/qualityAndSafety/record.scss";

@function pxToRem($val) {
    @return $val/100 + rem;
}

/deep/ .color-00ACFB {
    color: #00acfb;
}

/deep/ .tableBox {
    position: relative;
    width: 100%;
    height: 100%;

    .pageFix {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

    .tableList {
        width: 100%;
        height: calc(100% - 100px);

        .el-table--border::after,
        .el-table--group::after,
        .el-table::before {
            display: none;
        }

        .el-table {
            color: #333333;
            font-family: MicrosoftYaHei;
            font-size: pxToRem(14);

            thead tr {
                border-radius: pxToRem(6) !important;

                th {
                    padding: pxToRem(12) 0;
                    color: #666666;
                    font-size: pxToRem(14);
                    font-family: Source Han Sans CN;
                }
            }
        }

        .el-table__row {
            background-color: #fff;
            cursor: pointer;
            font-size: pxToRem(12);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            border-bottom: pxToRem(1) solid #eee;

            &.el-table__row--level-1,
            &.el-table__row--level-2 {
                background-color: #fafcfc !important;
            }

            td {
                padding: pxToRem(10) 0;
            }
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background-color: #fff;
            cursor: pointer;
        }
    }
}

/deep/ .el-icon-circle-close {
    color: #fff !important;
}

/deep/ .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;

    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

#subPage {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .top {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        background: #fff;
        border-radius: pxToRem(6);

        .list {
            width: 100%;
            padding: pxToRem(20);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: pxToRem(1) solid #f3f3f3;
            box-sizing: border-box;

            .item {
                height: pxToRem(40);
                margin-right: pxToRem(20);
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    color: #333333;
                    font-size: pxToRem(14);
                    font-family: Source Han Sans CN;
                    width: pxToRem(70);
                }

                .tip {
                    position: absolute;
                    left: -5px;
                    top: 8px;
                    color: red;
                }
            }
        }
    }

    .infoList {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: pxToRem(20);

        .item {
            width: 15%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 1.6%;
            padding: pxToRem(10) pxToRem(10);
            box-sizing: border-box;
            background-color: #fff;
            border-radius: pxToRem(6);

            &:last-of-type {
                margin-right: 0;
            }

            .left {
                width: pxToRem(92);
                height: pxToRem(92);
                margin-right: pxToRem(15);

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .right {
                flex: 1;

                .name {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: pxToRem(14);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #666666;
                    margin-bottom: pxToRem(16);
                }

                .num {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: pxToRem(24);
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    color: #e65159;
                }
            }
        }
    }

    .operationBox {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tableBtn {
            width: pxToRem(120);
            height: pxToRem(35);
            background: var(--themeColor);
            border-radius: pxToRem(3);
            text-align: center;
            line-height: pxToRem(35);
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;

            &.cancel {
                background-color: #fff;
                border: 1px solid var(--themeColor);
                border-radius: 3px;
                color: var(--themeColor);

                &:hover {
                    background: var(--themeColor);
                    color: #fff;
                }
            }

            .btnBox {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &:hover {
                opacity: 0.7;
            }
        }
    }

    .bottom {
        width: 100%;
        height: calc(100% - 95px) !important;
        flex: 1;
        overflow: hidden;
        border-radius: pxToRem(6);
        background-color: #fff;
        padding-top: pxToRem(20);
        box-sizing: border-box;
    }
}

/deep/ .ivu-page-next,
/deep/ .ivu-page-prev {
    width: pxToRem(44);
    height: pxToRem(44);
    background: #f8f9fb;
    border-radius: pxToRem(4);
    border: none !important;
    color: #9aa1a8 !important;
    line-height: pxToRem(44);

    a {
        font-size: pxToRem(14);
        color: #32585a;
    }
}

/deep/ .ivu-page-next:hover,
/deep/ .ivu-page-prev:hover {
    border-color: #089082 !important;
    color: #f36e65 !important;
}

/deep/ .ivu-page-item {
    width: pxToRem(44);
    height: pxToRem(44);
    border-color: transparent !important;
    background-color: #f8f9fb !important;
    line-height: pxToRem(44);

    a {
        font-size: pxToRem(14);
        color: #32585a;
    }
}

/deep/ .ivu-page-options-elevator {
    height: pxToRem(44);
}

/deep/ .ivu-page-options-elevator input {
    width: pxToRem(67);
    height: pxToRem(44);
    background: #f8f9fb;
    border: pxToRem(2) solid #f8f9fb;
    border-radius: pxToRem(4);
}

/deep/ .ivu-page-item-active {
    border-color: transparent !important;
    background-color: #e9f2f6 !important;
}

/deep/ .ivu-page-item-active a,
/deep/ .ivu-page-item-active:hover a {
    color: #32585a !important;
}

/deep/ .ivu-page-options-elevator input:focus {
    border-color: transparent !important;
}

/deep/ .ivu-page-options-elevator:hover input {
    border-color: transparent !important;
}

/deep/ .ivu-tabs-tab {
    color: #666 !important;
}

/deep/ .ivu-tabs-tab:hover {
    color: #00acfb !important;
}

/deep/ .ivu-tabs-ink-bar {
    background-color: #00acfb !important;
}

/deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
    color: #00acfb !important;
}

.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
</style>
